import React from 'react'
import { List } from 'antd'
import axios from 'axios'
class ContainerList extends React.Component {
    componentWillReceiveProps(nextProps) {
        console.log(nextProps)
        const id = nextProps.match.params.id;
        axios.get('http://www.dell-lee.com/react/api/list.json?id='+id)
            .then((res) => {
                this.setState({
                    data: res.data.data
                })
            })
    }
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }
    componentDidMount() {
        const id = this.props.match.params.id||1;
        axios.get(`http://www.dell-lee.com/react/api/list.json?id=${id}`)
            .then((res) => {
                this.setState({
                    data: res.data.data
                })
            })
    }
    render() {
        return (
            <div>
                <List
                    style={{ margin: '20px', background: '#fff' }}
                    bordered
                    itemLayout="horizontal"
                    dataSource={this.state.data}
                    renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                                title={<a href="https://ant.design">{item.title}</a>}
                            />
                        </List.Item>
                    )}
                />
            </div>
        )
    }
}
export default ContainerList